<template>
  <el-dialog :visible.sync="isShow" fullscreen class="addquestion">
    <!-- 弹框标题 -->
    <div slot="title" class="title">{{mode == 'add'? "新增题库":"编辑题库"}}</div>
    <!-- form表单主体部分 -->
    <el-form :model="form" class="form" label-width="100px" :rules="rules" ref="form">
      <!-- 学科 -->
      <el-form-item label="学科" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择学科">
          <el-option
            v-for="(item,index) in subList"
            :key="index"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 阶段 -->
      <el-form-item label="阶段" prop="step">
        <el-select v-model="form.step" placeholder="请选择学科">
          <el-option v-for="(value,key,index) in stepObj" :key="index" :value="key" :label="value"></el-option>
        </el-select>
      </el-form-item>
      <!-- 企业 -->
      <el-form-item label="企业" prop="enterprise">
        <el-select v-model="form.enterprise" placeholder="请选择企业">
          <el-option
            v-for="(item,index) in busList"
            :key="index"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 城市 -->
      <el-form-item label="城市" prop="city">
        <el-cascader v-model="form.city" :options="options"></el-cascader>
      </el-form-item>
      <!-- 题型 -->
      <el-form-item label="题型" prop="type">
        <el-radio
          v-model="form.type"
          v-for="(value,key,index) in typeObj"
          :key="index"
          :label="+key"
        >{{value}}</el-radio>
      </el-form-item>
      <!-- 题目难度 -->
      <el-form-item label="难度" prop="difficulty">
        <el-radio
          v-model="form.difficulty"
          v-for="(value,key,index) in diffObj"
          :key="index"
          :label="+key"
        >{{value}}</el-radio>
      </el-form-item>
      <hr />
      <!-- 题目标题：富文本编辑器 -->
      <el-form-item label="试题标题" prop="title" class="content">
        <quillEditor v-model="form.title" @change="editorChange('title')"></quillEditor>
      </el-form-item>
      <!-- 根据题型选项，显示不同的选项组件 -->
      <el-form-item :label="typeObj[form.type]" :prop="selectCheck[form.type]">
        <selectItem :form="form" @sonItem="editorChange"></selectItem>
      </el-form-item>
      <hr />
      <!-- 视频解析 -->
      <el-form-item label="解析视频" class="Analyvideo">
        <upload v-model="form.video" type="video"></upload>
      </el-form-item>
      <hr />
      <!-- 答案解析 -->
      <el-form-item label="答案解析" prop="answer_analyze" class="content">
        <quillEditor v-model="form.answer_analyze" @change="editorChange('answer_analyze')"></quillEditor>
      </el-form-item>
      <!-- 试题备注 -->
      <el-form-item label="试题备注" prop="remark">
        <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <!-- 弹框底部 -->
    <div slot="footer" class="footer">
      <el-button @click="isShow = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
//省市联动数据
import { regionData } from "element-china-area-data";
//富文本导入包
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 导入封装的单选，多选，简答组件
import selectItem from "./selectItem";
// 导入封装的上传公共组件
import upload from "@/components/upload.vue";
// 新增题目与编辑题库的api导入
import { addQuestion, editQuestion } from "@/api/question.js";
export default {
  // 注册组件
  components: { quillEditor, selectItem, upload },
  props: ["subList", "stepObj", "busList", "typeObj", "diffObj"],
  data() {
    return {
      mode: "add",
      isShow: false,
      // electItem组件验证，根据不同的选项验证不同的数据
      selectCheck: {
        1: "single_select_answer",
        2: "multiple_select_answer",
        3: "short_answer",
      },
      form: {
        subject: "", //	是	int	学科id标识
        step: "", //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: "", //	是	int	企业id标识
        city: [], //	是	array	[省、市、区县]
        type: 1, //	是	string	题型 1单选 、2多选 、3简答
        difficulty: 1, //	是	int	题目难度 1简单 、2一般 、3困难
        title: "", //	是	string	标题
        single_select_answer: "", //	是	string	单选题答案
        multiple_select_answer: [], //	是	array	多选题答案
        short_answer: "", //	是	string	简答题答案
        video: "", //	否	string	解析视频地址
        answer_analyze: "", //	是	string	答案解析
        remark: "", //	是	string	答案备注
        select_options: [
          {
            label: "A",
            text: "",
            image: "",
          },
          {
            label: "B",
            text: "",
            image: "",
          },
          {
            label: "C",
            text: "",
            image: "",
          },
          {
            label: "D",
            text: "",
            image: "",
          },
        ], //	是	array	选项，介绍，图片介
      },
      //   省市联动数据
      options: regionData,
      // 验证规则
      rules: {
        subject: [{ required: true, message: "必填哦", trigger: "change" }],
        step: [{ required: true, message: "必填哦", trigger: "change" }],
        enterprise: [{ required: true, message: "必填哦", trigger: "change" }],
        city: [{ required: true, message: "必填哦", trigger: "change" }],
        type: [{ required: true, message: "必填哦", trigger: "change" }],
        difficulty: [{ required: true, message: "必填哦", trigger: "change" }],
        title: [{ required: true, message: "必填哦", trigger: "change" }],
        single_select_answer: [
          { required: true, message: "必填哦", trigger: "change" },
        ],
        multiple_select_answer: [
          { required: true, message: "必填哦", trigger: "change" },
        ],
        short_answer: [
          { required: true, message: "必填哦", trigger: "change" },
        ],
        video: [{ required: true, message: "必填哦", trigger: "change" }],
        answer_analyze: [
          { required: true, message: "必填哦", trigger: "change" },
        ],
        remark: [{ required: true, message: "必填哦", trigger: "change" }],
        select_options: [
          { required: true, message: "必填哦", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    isShow(newVal) {
      if (newVal == false) {
        this.form = {
          subject: "", //	是	int	学科id标识
          step: "", //	是	int	阶段1、初级 2、中级 3、高级
          enterprise: "", //	是	int	企业id标识
          city: [], //	是	array	[省、市、区县]
          type: 1, //	是	string	题型 1单选 、2多选 、3简答
          difficulty: 1, //	是	int	题目难度 1简单 、2一般 、3困难
          title: "", //	是	string	标题
          single_select_answer: "", //	是	string	单选题答案
          multiple_select_answer: [], //	是	array	多选题答案
          short_answer: "", //	是	string	简答题答案
          video: "", //	否	string	解析视频地址
          answer_analyze: "", //	是	string	答案解析
          remark: "", //	是	string	答案备注
          select_options: [
            {
              label: "A",
              text: "",
              image: "",
            },
            {
              label: "B",
              text: "",
              image: "",
            },
            {
              label: "C",
              text: "",
              image: "",
            },
            {
              label: "D",
              text: "",
              image: "",
            },
          ], //	是	array	选项，介绍，图片介
        };
        this.$nextTick(()=>{
          this.$refs.form.clearValidate()
        })
      }
    },
  },
  methods: {
    // 富文本的change事件
    editorChange(msg) {
      this.$refs.form.validateField(msg);
    },
    // 提交按钮
    submit() {
      // 全局表单验证
      this.$refs.form.validate((res) => {
        if (res) {
          // 新增模式
          if (this.mode == "add") {
            addQuestion(this.form).then(() => {
              this.$message.success("新增成功");
              this.$parent.search();
              this.isShow = false;
            });
          } else {
            //  编辑模式
            editQuestion(this.form).then(() => {
              this.$message.success("编辑成功");
              this.$parent.getData();
              this.isShow = false;
            });
          }
        } else {
          this.$message.error("验证失败");
        }
      });
    },
  },
};
</script>

<style lang="less">
.addquestion {
  .title {
    color: #fff;
    height: 53px;
    font-size: 18px;
    line-height: 53px;
    padding-left: 20px;
    background: linear-gradient(to right, #01bef2, #1394fa);
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 18px;
  }
  .footer {
    text-align: center;
  }
  .form {
    width: 835px;
    margin: 0 auto;
  }
  .content .el-form-item__content {
    margin-left: 0 !important;
    margin-top: 60px;
  }
  .el-input {
    width: 364px;
    height: 40px;
  }
  //   .el-form-item__content {
  //       padding-left: 40px;
  //   }
  .el-form-item__label {
    text-align: left;
  }
  .Analyvideo {
    margin-top: 30px;
    .el-upload {
      border: none;
      text-align: left;
      .avatar-uploader {
        margin-left: 0 !important;
      }
    }
  }
}
</style>